
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>电影作业</title>
    <style>
      .web {
        /* 设置整个盒子的样式 */
        width: 327px;
        height: 342px;
        border: solid;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
      .movie {
        width: 322px;
        height: 100px;
        display: flex;
        justify-content: space-between;
      }
      .cover {
        width: 70px;
        height: 70px;
      }
      .src{
        width: 70px;
        height: 70px;
      }
      .desc {
        width: 235px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
       
      }
      .title {
        display: flex;
        justify-content: space-between;
        height: 24px;
      }
      .title-left {
        /* 设置盒子大小 */
        width: 59px;
      }
      
      .title-right {
        width: 71px;
        color: rgb(240, 22, 22);
      
      }
      .info {
        /* 设置元素为弹性盒，并且设置文字溢出处理 */
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;    
      }
      .classify {
        /* 设置颜色背景并将文字居中 */
       background-color: rgb(236, 206, 149);
        height: 20px;
        text-align: center;
        color: rgb(199, 12, 12);       
      }
    </style>
  </head>
  <body>
    <div class="web">
      <div class="movie">
        <div class="cover"><img src="https://pic.imgdb.cn/item/620f74d72ab3f51d91f3abb7.jpg" height="100px"
          width="80px">
        </div>
        <div class="desc">
          <div class="title">
             <div class="title-left">客人</div>
             <div class="title-right">300人</div>
          </div>
          <div class="info">艾德里安（马里奥·卡萨斯 Mario Casas 饰）经营着一间科技公司，事业蒸蒸日上</div>
          <div class="classify">详细</div>
        </div>
      </div>
        <div class="movie">
          <div class="cover"><img src="https://pic.imgdb.cn/item/620f75042ab3f51d91f3e19e.jpg" height="100px"
          width="80px">
          </div>
          <div class="desc">
            <div class="title">
              <div class="title-left">寒战</div>
              <div class="title-right">300人</div>
            </div>
            <div class="info">总的来说，《寒战2》是一部水准之上的作品，在如今港片式微的格局下，《寒战2》找到了一种拍摄“好看的主旋律电影”的方法</div>
            <div class="classify">详细</div>
          </div>
      </div>
      <div class="movie">
        <div class="cover"><img src="https://pic.imgdb.cn/item/620f75172ab3f51d91f3f7e7.jpg" height="100px"
          width="80px">
        </div>
        <div class="desc">
          <div class="title">
            <div class="title-left">小说家</div>
            <div class="title-right">300人</div>
          </div>
          <div class="info">改编自同名小说讲述的是现实的人进入到异世界开启冒险之旅的冒险</div>
          <div class="classify">详细</div>
        </div>
      </div>
    </div>
  </body>
</html>